<template>
	<section>
		<mt-header fixed :title="this.channelInfo.productName">
			<mt-button slot="left">
				<router-link to="/news/noob">
					<a class="white" href="javascript:;">
						<img class="top-icon" :src="imgNew" alt="" width="18" style="vertical-align:-4px;">
					</a>
				</router-link>
			</mt-button>
			<mt-button slot="right" v-show="mission">
				<img class="top-icon mr10" @click="toNewTask" :src="imgTask" alt="" width="16" style="vertical-align:-2px;">
			</mt-button>
		</mt-header>
		<div class="mt40">
			<!-- banner -->
			<Banner></Banner>

			<!-- information -->
			<div class="bgwhite pl10 pr10 pt10 pb10 index-information">
			 	<img :src="imgProfit" class="info-img flt-index" alt="">
				<span class="flt-index flt-txt" v-html="userDeal"></span>				
			</div>
		</div>

		<div class="main-nav mt5 nav-home">
			<MainNav></MainNav>
		</div>

		<!-- 区块链快讯 -->
		<b-container class="bv-example-row">
			<b-row>
				<b-col cols="6" class="dwqd">
					<img :src="qklkx" height="110%">
				</b-col>
	 			<b-col cols="5">
	 				<b-col>
						<img :src="jrkx" class="height50">
	 				</b-col>
	 				<b-col>
						<img :src="cjyw" class="height50">
	 				</b-col>	
	 			</b-col> 
			</b-row>
		</b-container>

		<div class="hot">
			<Hot></Hot>
		</div>

		<footer class="mt30 pb50 mb40 fs12">
			<ul class="lh20 tc">
				<li>
					<a class="" href="javascript:;">
						<router-link :to="{path:'/bannerDetail',query: {id:'5b4ad99be4b0ab6b75406ff4'}}">
							<span>风险告知</span>
						</router-link>
					</a>
					<a class="" href="javascript:;">
						<router-link :to="{path:'/bannerDetail',query: {id:'5b4aea82e4b0ab6b75406ff5'}}">
							<span>·资金安全·</span>
						</router-link>
					</a>
					<a class="" href="javascript:;">
						<router-link :to="{path:'/bannerDetail',query: {id:'5b4aec95e4b0ab6b75406ff6'}}">
							<span>合作机构</span>
						</router-link>
					</a>
				</li>
				<li v-show="false">客服电话<span class="ml5">{{channelInfo.phone}}</span></li>
				<li class="tc">交易由纽约商品交易所及港交所实盘对接</li>
				<li class="tc">合作伙伴·平安保险·南华期货·芝加哥商品交易所·CME集团</li>
				<li class="tc">香港交易所·新加坡交易所·欧洲期货交易所</li>
				<li class="tc" id="status" ref="status">{{about}}</li>
                <!-- <li><a href="weixin://" class="dl-btn" id="download">打开微信</a></li> -->
			</ul>
		</footer>
		<Nav></Nav>
	</section>
</template>
<script>

	import { MessageBox, Toast, Popup } from 'mint-ui'
	import Vue from 'vue'
	Vue.component(Popup)
	import storage from '@/tools/storage.js'

	import 'mint-ui/lib/style.css'
	//footer
	import Nav from '@/pages/Nav'
	//swiper
	import Banner from './subPage/banner.vue'
	// main-nav
	import MainNav from './subPage/mainNav.vue'
	//热门
	import Hot from './subPage/hot.vue'
	//mutations
	import { mapState, mapMutations } from 'vuex'
	import { setTimeout } from 'timers'
	import { orderStatisticIndexReport } from '@api/order.js'
	import { userNewsLoadNews } from '@api/user.js'
	//解析url

	function getParameterByName(name) {
		var name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"),
			regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
			results = regex.exec(location.search);
		return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
	}

	storage.setItem('source', getParameterByName('source') || window.location.host + '未获取到');

	export default {
		name: 'Home',
		components: {
			Nav,
			Banner,
			MainNav,
			Hot,
		},
		data() {
			return {
				name: "jyt",
				//大家都在买
				buyInfo: [{}],
				buyIdx: 0,
				allQuotaTimer: null,

				imgProfit: "./static/new_img/trumpet.svg",
				imgNew: "./static/imgs/new.svg",
				imgTask: "./static/imgs/task.svg",
				about: '',
				//区块链快讯
				qklkx:'./static/imgs/qklkx.svg',
				//金融快讯
				jrkx: './static/imgs/jrkx.svg',
				//财经要闻
				cjyw: './static/imgs/cjyw.svg'
			}
		},
		created() {
			this.getPeopleBuy();
			// 加载广告通知
			this.loadNews();
		},
		mounted() {

		},
		computed: {
			...mapState(['mission', 'channelInfo', 'userInfo']),
			userDeal() {
				var data = this.$data.buyInfo;
				var idx = this.$data.buyIdx;
				var curData = data[idx];	
				if (!curData) {
					return '';
				}
			 
				return (curData.nick || '···') + ' ' + (curData.tradeType || '···') + '  ' + (curData.futuresType || '···') + '  ' + (curData.handNums || '···') + '手' + '<span class="wocao" style="display:inline; padding-left:30px;font-weight: 100!important; color:#888; font-size:14px;">' + (this.getTimeType(curData.time) || '···') + '</span>'
			},
		},
		methods: {
			...mapMutations(['setChannelInfo', 'setCallbackUrl']),
			
			getTimeType(dateTimeStamp){

				var today = new Date();//获得当前日期
			    var year = today.getFullYear();//获得年份
			    var month = today.getMonth() + 1;//此方法获得的月份是从0---11，所以要加1才是当前月份
			    var day = today.getDate();//获得当前日期
			    dateTimeStamp = new Date( year + '-' + month + '-' + day + ' ' + dateTimeStamp )
			  
				var result = ''
				var minute = 1000 * 60      //把分，时，天，周，半个月，一个月用毫秒表示
			    var hour = minute * 60
			    var day = hour * 24
			    var week = day * 7
			    var halfamonth = day * 15
			    var month = day * 30
			    var now = new Date().getTime()   //获取当前时间毫秒
			    console.log(now)

			    var diffValue = now - dateTimeStamp //时间差

			    if(diffValue < 0){
			        return result
			    }

			    var minC = diffValue/minute  //计算时间差的分，时，天，周，月
			    var hourC = diffValue/hour
			    var dayC = diffValue/day
			    var weekC = diffValue/week
			    var monthC = diffValue/month

			    if(monthC >= 1 && monthC <= 3){
			        result = " " + parseInt(monthC) + "月前"
			    }else if(weekC >= 1 && weekC <= 3){
			        result = " " + parseInt(weekC) + "周前"
			    }else if(dayC >= 1 && dayC <= 6){
			        result = " " + parseInt(dayC) + "天前"
			    }else if(hourC >= 1 && hourC <= 23){
			        result = " " + parseInt(hourC) + "小时前"
			    }else if(minC >= 1 && minC <= 59){
			        result =" " + parseInt(minC) + "分钟前"
			    }else if(diffValue >= 0 && diffValue <= minute){
        			result = "刚刚"
        		}else {
			        var datetime = new Date();
			        datetime.setTime(dateTimeStamp);
			        var Nyear = datetime.getFullYear();
			        var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
			        var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
			        var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
			        var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
			        var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
			        result = Nyear + "-" + Nmonth + "-" + Ndate
			    }
				return result
			},
			loadNews() {
				userNewsLoadNews({
					page: 0,
					pageSize: 1,
					pushType: 2,
				}).then((res) => {
					if (res.code != 200) return;
					if (storage.getItem('newsId') == res.data[0].id) return;
					if (res.data[0].timeStart && res.data[0].timeEnd) {

						const nowTime = new Date().getTime();
						const timeStart = new Date(res.data[0].timeStart.replace(/\-/g, "/").replace(/\.0/g, "")).getTime();
						const timeEnd = new Date(res.data[0].timeEnd.replace(/\-/g, "/").replace(/\.0/g, "")).getTime();

						if (!timeStart || !timeEnd) return;
						if (timeStart < nowTime && nowTime < timeEnd) {
							MessageBox.alert(res.data[0].pushContent, res.data[0].pushTopic).then(action => {
								if (storage.getItem('newsId') != res.data[0].id) {
									this.$router.push({
										path: "/news/detail?id=" + res.data[0].id,
									});
									storage.setItem('newsId', res.data[0].id);
								}
							});
						}
					}
				})
			},
			getPeopleBuy() {
				orderStatisticIndexReport().then(res => {
					if (res.code == 200) {
						this.$data.buyInfo = res.data;
						console.log('+++++++++++++====')
						console.log(res.data)
						var length = this.$data.buyInfo.length;
						if (!timer) {
							var timer = setInterval(() => {
								if (this.$data.buyIdx < length - 1) {
									this.$data.buyIdx++;
								} else {
									this.$data.buyIdx = 0;
								};
							}, 5000);
						}
					}
				})
					.catch(function (error) {
						console.log(error);
					});
			},
			toNewTask() {
				if (this.userInfo.userPhone) {
					this.$router.push({
						path: '/activity/newTask',
					})
				} else {
					this.$router.push({
						path: '/login',
					})
				}
			} 
		},
	}

</script>
<style scoped lang='scss'>
	.dwqd{
		margin-left: 5%;
	}
	.nav-home{
		margin-top: 30px;
	}
	.bgwhite > .flt-index{
		position:absolute
	}
	.info-img{
		display: block;
	 	width: 24px;
	 	height: 24px;
	 	top: 14px;
	 	left: 20px;
	}
 	.flt-txt{
 		display: block;
	    height: 24px;
	    left: 65px;
	    top: 0;
	    font-weight: 550;
 	}
	.all-buy {
		border-radius: rem(25px);
		position: relative;
	}

	.all-buy img {
		position: absolute;
		top: rem(-5px);
		left: rem(-5px);
	}

	.mint-msgbox-message {
		text-align: left !important;
		text-indent: 2em;
	}
    footer{
        color: #707278;
        a {
            color: #707278;
        }
    }
    .mt40{
    	position:relative;
    }
    .index-information{
    	position: absolute;
	    width: 90%;
	    margin-left: 5%;
	    bottom: -13%;
	    height: 50px;
	    border-radius:5px;
	    box-shadow:1px 1px 0.5px #eee;
    }
    .isnide{
    	background-color : #fff !important;
    }
    .wocao{
    	font-weight:550;
    	font-size:14px;
    }
</style>